innerHTML vs createElement

2016-07-13

innerHTML vs createElement

生成Dom的两种方式,孰优孰劣呢?

就我们的经验看来,innerHTML这种采用字符串拼接生成dom的方式似乎更加方便,并且效率更高。但是那原生的createElement又有什么优势呢?
以下,优势观点来自于stack overflow的言论,翻译的也不一点准确,欢迎探讨。

  • createElement,当元素插入后仍然保留对dom元素的指针。而innerHTML插入后,并没有对dom元素的指针,你需要再通过getElementById重新选取。
  • createElement能够获得事件处理函数,而innerHTML生成的新dom无法获得原先设置的事件处理函数。
  • 某些情况下,createElement更加快速。如果你需要反复操作字符串,在每次处理后再次插入。每次插入都将进行解析与制作dom,在性能上会很差。
  • 可读性与可维护上createElement会优秀一些